<template>
	<view>
		<view class="fakeloader">
			<view class="spinner2">
				<view class="spinner-container container1">
					<view class="circle1 thmeBg"></view>
					<view class="circle2 thmeBg"></view>
					<view class="circle3 thmeBg"></view>
					<view class="circle4 thmeBg"></view>
				</view>
				<view class="spinner-container container2">
					<view class="circle1 thmeBg"></view>
					<view class="circle2 thmeBg"></view>
					<view class="circle3 thmeBg"></view>
					<view class="circle4 thmeBg"></view>
				</view>
				<view class="spinner-container container3">
					<view class="circle1 thmeBg"></view>
					<view class="circle2 thmeBg"></view>
					<view class="circle3 thmeBg"></view>
					<view class="circle4 thmeBg"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss">
.container1>view,.container2>view,.container3>view{
		/* 控制小圆点的大小 */
	width:12rpx;height:12rpx; 
		/* 控制小圆点的颜色 */
	background-color:#037CFF;
	border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.spinner2{
		/* 控制所有小圆点父盒子的大小 */
	width: 88rpx;height: 88rpx;
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}
.fakeloader{position:fixed;width:100%;height:100%;top:0;left:0;z-index: 999;background-color: #FFFFFF;}
.spinner2 .spinner-container{position:absolute;width:100%;height:100%}
.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}
.circle1{top:0;left:0}
.circle2{top:0;right:0}
.circle3{right:0;bottom:0}
.circle4{left:0;bottom:0}
.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.container3 .circle1{-webkit-animation-delay:-1s;animation-delay:-1s}
.container1 .circle2{-webkit-animation-delay:-.9s;animation-delay:-.9s}
.container2 .circle2{-webkit-animation-delay:-.8s;animation-delay:-.8s}
.container3 .circle2{-webkit-animation-delay:-.7s;animation-delay:-.7s}
.container1 .circle3{-webkit-animation-delay:-.6s;animation-delay:-.6s}
.container2 .circle3{-webkit-animation-delay:-.5s;animation-delay:-.5s}
.container3 .circle3{-webkit-animation-delay:-.4s;animation-delay:-.4s}
.container1 .circle4{-webkit-animation-delay:-.3s;animation-delay:-.3s}
.container2 .circle4{-webkit-animation-delay:-.2s;animation-delay:-.2s}
.container3 .circle4{-webkit-animation-delay:-.1s;animation-delay:-.1s}
@keyframes bouncedelay{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
@-ms-keyframes bouncedelay{0%,80%,100%{-ms-transform:scale(0)}40%{-ms-transform:scale(1)}}
@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}
</style>
